<template>
  <div class="pr-24 py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="卡片底色" class="mb-24">
      <ColorSetting v-model="style.backgroundColor" />
    </el-form-item>
    <el-form-item label="字体颜色" class="mb-24">
      <ColorSetting v-model="style.color" />
    </el-form-item>
    <el-form-item label="文本样式" class="mb-24">
      <FontStyleSetting v-model="style" />
    </el-form-item>
    <el-form-item label="文本" class="mb-24">
      <el-input v-model="config.text" type="textarea" rows="5" resize="none" maxlength="999" />
    </el-form-item>
    <BorderSetting v-model="model" />
  </div>
</template>

<script>
  import { getHexColor } from '@/utils';
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import FontStyleSetting from '@/views/productEdit/components/settingComponent/FontStyleSetting';

  export default {
    components: { ColorSetting, BorderSetting, FontStyleSetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    },

    methods: {
      getHexColor
    }
  };
</script>

<style lang="scss" scoped></style>
